<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/excel.js"></script>
</head>
<body>
<div class="main">
    <div class="heading1">
        流量分析
    </div>
    <div style="width: 80px;height: 30px;float:right;margin-right: 100px;">
        <img class="img1" src="resource/export-1.png" alt="" style="width: 100%;height: 100%;CURSOR: pointer"
             onclick="tableToExcel()"></div>

    <div class="section1">
		<div class="heading2">
            每日访问量：
        </div>
		<div>
			<div style="float: right;margin-top: -30px;color: #999999;
		font-size:18px;
		font-family: Microsoft YaHei UI;
		letter-spacing:0.75px;">
            总访问量：
        </div>
        <div style="width: 100px;height: 60px;font-size: 40px;font-family: Microsoft YaHei UI;color: #47bde1;margin-left: 523px;margin-top: 10px;"
             id="total">
            2333
        </div>	
		</div> 
        <div id="Access_lineChart" style="width: 570px; height:380px;margin: 38px;top: -28px"></div>
    </div>
	
	
    <div class="section4">
		<div style="float: left;color: #999999;
		font-size:18px;
		font-family: 'Microsoft YaHei UI';
		letter-spacing:0.75px;margin-left:20px">
            每日产品访问量排行:
        </div>
		
		 <div id="Access_Productbar" style="width: 240px; height:252px;margin-top: -44px;float: left"></div>
		<div style="float: left;color: #999999;font-size:18px;
		font-family: 'Microsoft YaHei UI';
		letter-spacing:0.75px;margin-left:20px">
            每日产品访问量占比:
        </div>
        <div id="Access_Productpie" style="width: 200px;height: 200px;float: left;margin-left: 20px;margin-top: 20px;"></div>
		</div>
	 <div class="section7">
		<div style="float: left;color: #999999;
		font-size:18px;
		font-family: 'Microsoft YaHei UI';
		letter-spacing:0.75px;margin-left:20px">
            每日页面访问量排行:
        </div>
		 <div id="Access_Pagebar" style="width: 240px;height: 252px;float: left;margin-top: -44px;"></div>
		 <div style="float: left;color: #999999;
		font-size:18px;
		font-family: 'Microsoft YaHei UI';
		letter-spacing:0.75px;margin-left:20px">
            每日页面访问量占比:
        </div>
		   <div id="Access_Pagepie" style="width: 200px;height: 200px;float: left;margin-left: 20px;margin-top: 20px;"></div>
		 
        
	</div>
</body>
<script>
    document.getElementById("total").innerHTML = totalData['总访问量'][0];
</script>
<script>
    (function () {

        var lineChart = echarts.init(document.getElementById("Access_lineChart"));
        lineChart.setOption(getSingleLineOption(option_line, "日访问量", "每日访问量"));

        var PagepieChart = echarts.init(document.getElementById("Access_Pagepie"));
        PagepieChart.setOption(getItemPieOption(option_pie, "日页面访问量", totalData["日访问量"][0][0], "每日页面访问量占比"));

        var PagebarChart = echarts.init(document.getElementById("Access_Pagebar"));
        PagebarChart.setOption(getItemBarOption(option_bar, "日页面访问量", totalData["日访问量"][0][0], 10, "每日页面访问量排行"));

        var ProductpieChart = echarts.init(document.getElementById("Access_Productpie"));
        ProductpieChart.setOption(getItemPieOption(option_pie, "日产品访问量", totalData["日访问量"][0][0], "每日产品访问量占比"));

        var ProductbarChart = echarts.init(document.getElementById("Access_Productbar"));
        ProductbarChart.setOption(getItemBarOption(option_bar, "日产品访问量", totalData["日访问量"][0][0], 10, "每日产品访问量排行"));

        lineChart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                var when = totalData["日访问量"][0][xAxisInfo.value];
                PagepieChart.setOption(getItemPieOption(option_pie, "日页面访问量", when, "每日页面访问量占比"));
                PagebarChart.setOption(getItemBarOption(option_bar, "日页面访问量", when, 10, "每日页面访问量排行"));
                ProductpieChart.setOption(getItemPieOption(option_pie, "日产品访问量", when, "每日产品访问量占比"));
                ProductbarChart.setOption(getItemBarOption(option_bar, "日产品访问量", when, 10, "每日产品访问量排行"));
            }
        });
    })();

</script>
</html>